﻿<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>无标题文档</title>
    <script src="~/aa/vue/dist/vue.js"></script>
    <script src="~/aa/element-ui/lib/index.js"></script>
    <link href="~/aa/element-ui/lib/theme-chalk/index.css" rel="stylesheet" />
    <script src="~/aa/axios/dist/axios.js"></script>
    <link rel="stylesheet" href="~/css/table.css" type="text/css">
    <script type="text/javascript" src="~/javascript/comm/comm.js"></script>
    <script type="text/javascript" src="~/javascript/jquery-1.7.2.js"></script>
	<style type="text/css">	
		body{
            background-color: rgb(253,244,227);
		}
		div{
			position: relative;
		}
		div>ul{
			position:absolute;
			left:0;
			width: 200px;
			font-family: 微软雅黑;
                background-color: rgb(253,244,227);
		}
	</style>
</head>
<body>
    <div id="app">
        <el-menu background-color="rgb(253,244,227)"
                 text-color="#292421"
                 active-text-color="#292421"
                 :unique-opened="true"
                 :collapse="isz"
                 :collapse-transition="false"
                 :router="true"
                 :default-active="apath">
            <div class="toggle-button" v-on:click="toggle()">|||</div>
            <!--一级菜单-->
            <el-submenu :index="item.juriID.toString()"
                        v-for="item in list2"
                        :key="item.juriID">
                <template slot="title">
                    <!-- 图标 -->
                    <i :class="iconobj[item.juriID]"></i>
                    <!-- 文本 -->
                    <span>{{ item.jurName }}</span>
                </template>
                <!--二级菜单-->
                <el-submenu :index="item1.juriID.toString()"
                            v-for="item1 in item.children"
                            :key="item1.juriID"
                            v-bind:index="item1.juriID"
                            v-on:click="toggleSubmenu(item1.juriID)">
                    <template slot="title">
                        <!-- 图标 -->
                        <i class="el-icon-menu"></i>
                        <!-- 文本 -->
                        <span v-on:click="spath(item1.jurAddress)">{{ item1.jurName }}</span>
                    </template>
                    <!--三级菜单-->
                    <el-menu-item :index="item2.juriID.toString()"
                                  v-for="item2 in item1.children"
                                  :key="item2.juriID"
                                  v-bind:index="item2.jurAddress"
                                  v-on:click="spath(item2.jurAddress)">
                        <template slot="title">
                            <!-- 图标 -->
                            <i class="el-icon-menu"></i>
                            <!-- 文本 -->
                            <span>{{ item2.jurName }}</span>
                        </template>
                    </el-menu-item>
                </el-submenu>
            </el-submenu>
        </el-menu>
    </div>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    uid: "@ViewData["getRolesID"]",
                    iconobj: {
                        "14": "iconfont icon-user",
                        "15": "iconfont icon-tijikongjian",
                        "16": "iconfont icon-shangpin",
                        "17": "iconfont icon-danju"
                    },
                    // 是否折叠
                    isz: false,
                    // 被激活的链接地址
                    apath: "",
                    // 权限数据
                    list2: [],
                    activeIndex: "",
                    activeSubmenuIndex: -1,
                };
            },
            methods: {
                handleOpen(key, keyPath) {
                    console.log(key, keyPath);
                },
                handleClose(key, keyPath) {
                    console.log(key, keyPath);
                },
                toggleSubmenu(index) {
                    if (this.activeSubmenuIndex === index) {
                        this.activeSubmenuIndex = -1;
                    } else {
                        this.activeSubmenuIndex = index;
                    }
                },
                tc() {
                    window.sessionStorage.clear();
                    this.$router.push("/login");
                },
                // 点击按钮，切换菜单的折叠与展开
                toggle() {
                    this.isz = !this.isz;
                },
                spath(ss) {
                    this.apath = ss;
                    axios.get('/Home/GenerateUrl', {
                        params: {
                            s: ss
                        }
                    }).then(res => {
                        var url = res.data;
                        window.open(url, 'mainFrame');
                    })
                        .catch(err => {
                            console.error(err);
                        });
                },
                // 获取所有的菜单
                fill() {
                    axios.get('/Home/LefeMenu', {
                        params: {
                            rid: this.uid
                        }
                    }).then(res => {
                        this.list2 = res.data;
                    }).catch(err => {
                        console.info(err);
                    });
                },
                handleItemClick(index) {
                    if (this.activeIndex === index) {
                        this.activeIndex = "";
                    } else {
                        this.activeIndex = index;
                    }
                }
            },
            mounted() {
                this.fill();
            }
        });
    </script>
</body>
</html>
